<template>
  <section id="author">
    <el-card shadow="never">
      <div slot="header">
        <span class="has-text-weight-bold">{{$t('common.author')}}</span>
      </div>
      <div class="has-text-centered">
        <div class="mb-3">
          <router-link class="level-item" :to="{ path: `/member/${user.username}/home` }">
            <el-avatar :size="70" :src="`https://cn.gravatar.com/avatar/${user.id}?s=164&d=identicon`"></el-avatar>
           </router-link>
          {{ user.alias }}
          <span class="is-size-7 has-text-grey">{{ '@' + user.username }}</span>
          <p class="content mt-1 ml-3" style="text-align:left">
                <i class="el-icon-user"></i><span style="margin-right:10">{{$t('common.Bio')}}: </span>
                {{user.bio}}
          </p>
        </div>
        <div class="columns is-mobile mt-1 " style="text-align:left">
          <div class="ml-4" >
            <p><span class="tag is-light mr-2">{{ user.topicCount }}</span>{{$t('common.blogs')}}</p>
          </div>
          <div class="ml-5">
            <p> <span class="tag is-light mr-2">{{ user.followerCount }}</span>{{$t('common.follower')}}</p>
          </div>
        </div>
        <div>
          <button
            v-if="hasFollow"
            class="button is-info button-center is-fullwidth"
            @click="handleUnFollow(user.id)"
          >
            {{$t('common.following')}}
          </button>

          <button v-else class="button is-info is-light button-center is-fullwidth" @click="handleFollow(user.id)">
            {{$t('common.follow')}}
          </button>
        </div>
      </div>
    </el-card>
  </section>
</template>

<script>
import { follow, hasFollow, unFollow } from '@/api/follow'
import { mapGetters } from 'vuex'
export default {
  name: 'Author',
  props: {
    user: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      hasFollow: false
    }
  },
  mounted() {
    this.fetchInfo()
  },
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  methods: {
    fetchInfo() {
      if(this.token != null && this.token !== '')
      {
        hasFollow(this.user.id).then(value => {
          const { data } = value
          this.hasFollow = data.hasFollow
        })
      }
    },
    handleFollow: function(id) {
      if(this.token != null && this.token !== '')
      {
        follow(id).then(response => {
          const { message } = response
          this.$message.success(message)
          this.hasFollow = !this.hasFollow
          this.user.followerCount = parseInt(this.user.followerCount) + 1
        })
      }
      else{
        this.$message.info('Please log in first')
      }
    },
    handleUnFollow: function(id) {
      unFollow(id).then(response => {
        const { message } = response
        this.$message.success(message)
        this.hasFollow = !this.hasFollow
        this.user.followerCount = parseInt(this.user.followerCount) - 1
      })
    }
  }
}
</script>

<style scoped>
</style>